<template>
	<!-- 已加入的校友会 -->
	<g-page :is-tabbar="false">
		<view class="content">
			<!-- 搜索 -->
			<view class="search">
				<!-- 搜索框参数：https://uviewui.com/components/search.html -->
				<u-search shape="round"  placeholder="输入关键字"></u-search>
			</view>
			<view v-if="mailList.length > 0">
				<view class="item-box" v-for="(item,index) in mailList" :key="item.id">
					<view class="item-item" @click="toInfo(item.id)">
						<view class="item-left">
							<view class="item-icon">
								<!-- <u-icon size="70" style="margin-left: 7rpx;height: 80rpx;line-height: 80rpx;"
									name="group-fill" color="#ff0000" custom-prefix="custom-icon" /> -->
									<image style="width: 70rpx;height: 70rpx;line-height: 70rpx; border-radius: 10rpx;" :src="item.img" mode=""></image>
							</view>
							<view class="item-left-t">
								<view class="item-left-t-name">
									{{item.name}}
								</view>
								<view class="item-left-t-dep">
									{{item.mumber}}人
								</view>
							</view>
						</view>
						<view class="item-right">
							<u-icon size="25" name="arrow-right" style="margin-right: 20rpx;" color="#4e4e4f" />
						</view>
					</view>
					<u-line class="u-line" :hair-line="false"></u-line>
				</view>
			</view>
			<view v-else style="text-align: center;">还没有加入校友会！！</view>
		</view>
	</g-page>
</template>

<script>
	import {
		getJoinAssociation
	} from "@api"
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				page: 0,
				size: 10,
				userId:0,  //暂时
				mailList:[],
				userInfo:{}
			};
		},
		computed: {
			...mapState(['USER'])
		},
		onLoad() {
			this.getAssociationsList()
		},
		methods:{
			getAssociationsList(){
				//let userId = this.userId
				let userId = this.USER.userInfo.id
				getJoinAssociation({
					page: this.page,
					size: this.size,
					userId: userId
				}).then(res=>{
					this.mailList = res;
				}).catch(res=>{
					console.log("请求失败：",res)
				})
			},
			
			/* 跳转校友会详情页 */
			toInfo(id){
				this.$Router.push({name:'alumni_club',params:{id:id}})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 10rpx 20rpx;
	}

	.search {
		margin-bottom: 20rpx;
	}

	.item {
		&-item {
			height: 120rpx;
			line-height: 120rpx;
			padding: 2rpx 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		&-left {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			height: 80rpx;
			line-height: 80rpx;

			&-t {
				display: flex;
				flex-direction: column;
				margin-left: 30rpx;
				margin-top: 20rpx;

				&-name,
				&-dep {
					height: 40rpx;
					line-height: 40rpx;
				}

				&-name {
					font-size: 1.1em;
				}

				&-dep {
					font-size: 24rpx;
					color: #96969a;
				}
			}
		}

		&-box {
			&:hover {
				background: #F6F6F6 !important;
			}
		}

		&-icon {
			width: 80rpx;
			height: 80rpx;
			margin-top: 20rpx;
			border-radius: 50%;
			// background-color: #ff0000;
		}

		&-right {
			height: 120rpx;
			line-height: 120rpx;
		}
		
		&::after {
			content: '';
			width: 30upx;
			height: 30upx;
			position: absolute;
			right: 5%;
			background-size: 100%;
		}
	}
</style>
